<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" href="images/icons/favicon.ico" />
		<link href="style.less" rel="stylesheet/less" type="text/css" />
		<script src="jquery.js" type="text/javascript"></script>
		<script src="functions.js" type="text/javascript"></script>
		<script src="less.js" type="text/javascript"></script>
		<title>Puzzled</title>
	</head>
	<body>
		<input type="hidden" id="autoFocus" value="#firstname" />
		<div onclick="clearMsgs()" id="msgs">
			<c:forEach items="${msgs.fetchAll()}" var="msg">
				<p class="<c:out value="${msg.findClass()}" />">
					<c:out value="${msg.getMsg()}" />
				</p>
			</c:forEach>
	 	</div>
		<div id="container">
			<div id="header">
				<div id="userstatus">
					<c:choose>
						<c:when test="${user==null}">
							You are not logged in, please 
							<a href="/Puzzled/Puzzled?todo=login">login</a> 
							or 
							<a href="/Puzzled/Puzzled?todo=register">register</a>
						</c:when>
						<c:otherwise>
							Welcome, <c:out value="${user.getUserName()}" />
							[<img title="Puzzle Points!" class="pp" src="images/icons/pp.png" /> <c:out value="${user.getPoints()}" />] | 
							<a href="/Puzzled/Puzzled?todo=logout">logout</a>
						</c:otherwise>
					</c:choose>
				</div>
				<img title="Home" onclick="window.location='/Puzzled/Puzzled?todo=index'" src="images/logo.png" />
			</div>
			<div id="content">
				<c:choose>
					<c:when test="${user==null}">
						<form id="login" method="post" action="/Puzzled/Puzzled">
							<input type="hidden" name="todo" value="register" />
							<table align="center">
								<tr>
									<td>
										<label for="firstname">Firstname: </label>
									</td>
									<td>
										<input type="text" id="firstname" name="firstname" />
									</td>
								</tr>
								<tr>
									<td>
										<label for="lastname">Lastname: </label>
									</td>
									<td>
										<input type="text" id="lastname" name="lastname" />
									</td>
								</tr>
								<tr>
									<td>
										<label for="email">Email: </label>
									</td>
									<td>
										<input type="text" id="email" name="email" />
									</td>
								</tr>
								<tr>
									<td>
										<label for="username">Username: </label>
									</td>
									<td>
										<input type="text" id="username" name="username" />
									</td>
								</tr>
								<tr>
									<td>
										<label for="password">Password: </label>
									</td>
									<td>
										<input type="password" id="password" name="password" />
									</td>
								</tr>
								<tr>
									<td>
										<label for="confirm">Confirm: </label>
									</td>
									<td>
										<input type="password" id="confirm" name="confirm" />
									</td>
								</tr>
								<tr>
									<td>
									</td>
									<td>
										<input type="submit" value="Register" />
									</td>
								</tr>
							</table>
						</form>
					</c:when>
					<c:otherwise>
						Welcome, <c:out value="${user.getFirstName()}" />
					</c:otherwise>
				</c:choose>
			</div>
			<div id="footer">
				Copyright &copy; 2011-2012 AwesomeInc
			</div>
		</div>
	</body>
</html>